<template>
	<view class="qr_container">
		<changeOrgs @listData="listData" type="e" :bindType="bindType"></changeOrgs>
		<view class="qrcode">
			<view class="qrcode_box">
				<!-- #ifndef MP-ALIPAY -->
				<canvas style="width: 200px; height: 200px;" canvas-id="couponQrcode"></canvas>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<canvas style="width: 200px; height: 200px;" id="couponQrcode"></canvas>
				<!-- #endif -->
			</view>
			<view>
				<text class="qr_txt" v-if="refreshNum == 0">{{txtActive}}</text>
				<view style="padding-top: 50rpx;" v-if="refreshNum != 0">
					<view class="boxs" @click="refresh">
						<image src="/static/images/home/refresh.png" class="imgava"></image>
						<text class="qr_re">如果二维码失效请点击刷新</text>
					</view>
				</view>
				<view v-if="refreshNum == 0">
					<view class="boxs" @click="refresh">
						<image src="/static/images/home/refresh.png" class="imgava"></image>
						<text class="qr_re">如果二维码失效请点击刷新</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {milkQRCode, selectMilkByCode} from '../../common/api/index.js';
	const qrCode = require('../../common/js/weapp-qrcode.js');
	import { showLoading, hideLoading } from '../../common/js/loading.js';
	import {_showToast} from '../../common/js/util.js'
	import changeOrgs from '../../components/changeMilkOrgs.vue'
	export default {
		data() {
			return {
				text: null,
				refreshNum: 0,
				timer: null,
				txtActive: '',
				orgId: '',
				empId: '',
				bindType: 3,
				codeStatusTimer: null
			}
		},
		components: {
			changeOrgs
		},
		destroyed() {
			clearInterval(this.timer)
			clearTimeout(this.codeStatusTimer)
		},
		methods: {
			listData(arr, orgId, empId) {
				this.orgId = orgId
				this.empId = empId
				this._getQrCode()
			},
			_selectMilkByCode(){
				clearTimeout(this.codeStatusTimer)
				selectMilkByCode({code: this.text}).then(res => {
					if(res.code == 0){
						if(res.data == null || res.data.payStatus == 4){
							if(res.data){
								uni.showLoading({
									title: '支付中'
								})
							}
							this.codeStatusTimer = setTimeout(()=>{
								this._selectMilkByCode()
							}, 3000)
						}else{
							if(res.data.payStatus == 1){
								this.codeStatusTimer = setTimeout(()=>{
									this._selectMilkByCode()
								}, 3000)
							}else {
								uni.navigateTo({
									url:`./end?recordsData=${JSON.stringify(res.data)}`
								})
							}
						}
					} 
				}).catch(err => {console.log(err)})
			},
			_set() {
			  this.timer = setInterval(() => {
				  this.refreshNum = this.refreshNum - 1
				  if(this.refreshNum == 0) {
					clearInterval(this.timer)
					clearTimeout(this.codeStatusTimer)
					this.txtActive = '二维码已过期!'
				  }
			  }, 1000)
			},
			refresh() {
				this._getQrCode()
				let timers = setTimeout(() => {
					_showToast('刷新成功')
				}, 60)
				if(timers) clearTimeout(timers)
			},
			_getQrCode() {
				let s_userId = uni.getStorageSync('s_userId')
				showLoading()
				milkQRCode({
					userId: s_userId,
					empId: this.empId,
					orgId: this.orgId
				}).then(res => {
					if(res.resultCode == 0) {
						hideLoading()
						this.text = res.qrcode
						this.refreshNum = res.validTime
						this.couponQrCode()
						this._set()
					} else {
						_showToast(res.resultMsg)
						hideLoading()
					}
				}).catch(err => {
					hideLoading()
					console.log(err)
				})
			},
			couponQrCode() {
				this._selectMilkByCode()
				new qrCode('couponQrcode', {
					text: this.text,
					width: 200,
					height: 200,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.Q
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.qr_container {
		width: 100vw;
		height: 100vh;
		background-image: url('');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		align-items: center;
		.qrcode {
			background: #FFFFFF;
			box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.18);
			border-radius: 10rpx;
			padding: 80rpx;
			margin-top: 100rpx;
			.qrcode_box {
				width: 200px;
				padding: 20rpx;
			}
			.qr_txt {
				font-family: 'PingFangSC';
				font-weight: 400;
				font-size: 32rpx;
				color: red;
				padding: 30rpx 0;
				text-align: center;
				width: 100%;
				display: block;
			}
			.boxs {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.imgava {
					width: 50rpx;
					height: 50rpx; 
					margin-right: 15rpx;
				}
				.qr_re {
					font-size: 28rpx;
					font-family: "PingFangSC-Medium, PingFang SC";
					font-weight: 500;
					color: #6B707A;
				}
			}
		}
	}
	canvas {
		width: 400rpx;
		height: 400rpx;
	}
</style>
